<template>
    <div class="loading" :style="{ 'width': containerWidth, 'height': containerHeight }">
        <img src="../assets/images/loading.gif" :style="{ 'width': loadingImgWidth, 'height': loadingImgHeight }">
    </div>
</template>

<style lang="scss" scoped>
    .loading {
        text-align: center;
        width: 100%;
        height: 200px;

        img {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
    }

</style>

<script>
    export default {
        data() {
            return {
                containerWidth: '100%',
                containerHeight: '200px',
                loadingImgWidth: '80px',
                loadingImgHeight: '80px'
            }
        },
        props: {
            loadingOptions: {
                containerWidth: String,
                containerHeight: String,
                loadingImgWidth: String,
                loadingImgHeight: String
            }
        },
        created() {
            this.renderComponent();
        },
        methods: {
            renderComponent() {
                if (typeof this.loadingOptions === 'object') {
                    if (this.loadingOptions.containerWidth) {
                        this.containerWidth = this.loadingOptions.containerWidth;
                    }
                    if (typeof this.loadingOptions.containerHeight) {
                        this.containerHeight = this.loadingOptions.containerHeight;
                    }
                    if (typeof this.loadingOptions.loadingImgWidth) {
                        this.loadingImgWidth = this.loadingOptions.loadingImgWidth;
                    }
                    if (typeof this.loadingOptions.loadingImgHeight) {
                        this.loadingImgHeight = this.loadingOptions.loadingImgHeight;
                    }
                }
            }
        }
    }

</script>
